<template>
  <div class="topbar">
    <ul>
      <li
        v-for="(item, i) in navs"
        :key="item.id"
        :class="index == i ? 'active' : ''"
        @click="tabFn(i)"
      >
        <span>{{ item.name }}</span>
        <el-icon @click.stop="removeFn(i)"><Close /></el-icon>
      </li>
    </ul>
    <div @click="emptyFn" v-if="navs != false">关闭全部</div>
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import { storeToRefs } from 'pinia'
import { useTabStore } from '../stores/tabBar'

import { useRouter } from 'vue-router'
const $router = useRouter()
const tabStore = useTabStore()
let { navs, index } = storeToRefs(tabStore)
const tabFn = (num: number) => {
  tabStore.changeIndex(num)
  // 点击切换导航组件
  if (navs.value && navs.value[num]) {
    $router.push({ path: navs.value[num].path })
  }
}
const removeFn = (index: number) => {
  tabStore.remove(index)
  $router.push({ path: '/' })
}

const emptyFn = () => {
  tabStore.empty()
  $router.push({ path: '/' })
}
console.log('tab', tabStore.empty())
</script>
<style lang="scss">
@import '../common/scss/variable.scss';
.topbar {
  background-color: #fff;
  width: 100%;
  height: 41px;
  border-bottom: 1px solid #f1f1f1;
  display: flex;
  justify-content: space-around;
  align-items: center;
  border-radius: 5px;
  div {
    padding: 10px;
    width: 90px;
    font-size: 15px;
    color: black;
    cursor: pointer;
  }
  ul {
    width: 100%;
    display: flex;
    overflow: hidden;

    li {
      height: 40px;
      border-right: 1px solid #f0f0f0;
      padding: 0 20px;
      line-height: 40px;
      font-size: 15px;
      color: #666;
      border-radius: 5px;
      position: relative;
      cursor: pointer;
      overflow: hidden;
      .el-icon {
        position: absolute;
        top: 50%;
        right: 10px;
        transform: translateY(-50%);
        cursor: pointer;
      }
      span {
        margin-right: 15px;
      }
      &.active {
        background-color: $bgColor;
        color: #fff;
      }
    }
  }
}
</style>
